//饼状图
// 基于准备好的dom，初始化echarts实例
var barChart = echarts.init(document.getElementById("bar-chart"));

// 指定图表的配置项和数据
option = {
    title: {
        text: '故障数量统计'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:['故障数量']
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis:
        {
            type: 'value',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} 个'
            }
        },
    series:
        {
            name:'故障数量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        }

};

// 使用刚指定的配置项和数据显示图表。
barChart.setOption(option);

var areaCount1 = echarts.init(document.getElementById("area-count1"));

// 指定图表的配置项和数据
option = {
    title: {
        text: '今天区域故障统计'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:['区域故障数量统计']
    },
    xAxis: [
        {
            type: 'category',
            data: ['派出所','社区办','省市区'],
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis:
        {
            type: 'value',
            min: 0,
            max: 30,
            interval: 6,
            axisLabel: {
                formatter: '{value} 个'
            }
        },
    series:
        {
            name:'故障数量',
            type:'bar',
            data:[2.0, 4.9, 7.0]
        }

};

// 使用刚指定的配置项和数据显示图表。
areaCount1.setOption(option);

var areaCount2 = echarts.init(document.getElementById("area-count2"));

// 指定图表的配置项和数据
option = {
    title: {
        text: ''
    },
    color: ['#19EF42'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: '故障数量'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['A派出所','B派出所','C派出所','D派出所','E派出所','F派出所']
    },
    series:
        {
            name: '故障数量',
            type: 'bar',
            data: [4, 5, 5, 6, 6, 7]
        }
};


// 使用刚指定的配置项和数据显示图表。
areaCount2.setOption(option);

var areaCount3 = echarts.init(document.getElementById("area-count3"));

// 指定图表的配置项和数据
option = {
    title: {
        text: ''
    },
    color: ['#EFA946'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: '故障数量'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['A社区办','B社区办','C社区办','D社区办','E社区办','F社区办']
    },
    series:
        {
            name: '故障数量',
            type: 'bar',
            data: [4, 5, 5, 6, 6, 7]
        }
};


// 使用刚指定的配置项和数据显示图表。
areaCount3.setOption(option);

var areaCount4 = echarts.init(document.getElementById("area-count4"));

// 指定图表的配置项和数据
option = {
    title: {
        text: ''
    },
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: '故障数量'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },

    yAxis: {
        type: 'category',
        data: ['A省市县','B省市县','C省市县','D省市县','E省市县','F省市县']
    },
    series:
        {
            name: '故障数量',
            type: 'bar',
            data: [4, 5, 5, 6, 6, 7]
        }
};


// 使用刚指定的配置项和数据显示图表。
areaCount4.setOption(option);


//饼状图
var pieChart = echarts.init(document.getElementById("pie-chart"));
option = {
    title : {
        text: '设备故障类型统计',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['日常维护','设备异常','掉线','设备迁移','未知']
    },
    series : [
        {
            name: '故障类型',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:1548, name:'日常维护'},
                {value:310, name:'设备异常'},
                {value:234, name:'掉线'},
                {value:135, name:'设备迁移'},
                {value:335, name:'未知'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
pieChart.setOption(option);
